<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>宠物管理</title>
    <script src="./lib/vue.global.js"></script>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div id="app">
      <pop-up :visible="showAlertPop" :msg="message"></pop-up>
      <add-pop
        :visible="showAddPop"
        :pet="form"
        :handle-type="addType"
        @close-add="showAddPop = false;"
        @submit-add="handleSave"
      ></add-pop>
      <h3 class="list-title">宠物列表</h3>
      <div class="button-box">
        <button id="add-button" class="handle-button" @click="clickAdd">
          新增寄养
        </button>
        <button
          id="getback-button"
          class="handle-button"
          @click="handleCheckedGetback"
        >
          主人领走
        </button>
      </div>
      <ul class="pet-list">
        <li class="list-header">
          <input id="all-check" type="checkbox" v-model="allCheck" />
          <span class="pet-name">宠物名称</span>
          <span class="pet-owner">主人姓名</span>
          <span class="pet-phone">联系方式</span>
          <span class="pet-feed">今日投喂</span>
          <span>操作</span>
        </li>
        <!-- TODO：待补充代码 -->
        <li class="list-body" v-for="(item, index) in pets">
          <input class="pet-check" type="checkbox" v-model="item.checked" />
          <span class="pet-name">{{ item.name }}</span>
          <span class="pet-owner">{{ item.owner }}</span>
          <span class="pet-phone">{{ item.phone }}</span>
          <span class="pet-feed">{{ item.feed }}/3</span>
          <span>
            <span class="feed-text" @click="handleFeed(item)">投喂</span>
            <span class="edit-text" @click="clickEdit(item,index)">编辑</span>
            <span class="getback-text" @click="handleGetback(item)"
              >主人领走</span
            >
          </span>
        </li>
        <!-- TODO：END  -->
      </ul>
      <div class="no-pets" v-if="!all">
        <i class="icon-no-pets"></i>
        <span>暂无宠物</span>
      </div>
      <div class="summary">寄存总数：<span>{{all}}</span></div>
    </div>
    <script src="components/PopUp.js"></script>
    <script src="components/AddPop.js"></script>
    <script src="components/App.js"></script>
  </body>
</html>
